import React, { useCallback } from 'react'
import { string } from 'prop-types'
import { useHistory } from 'react-router-dom'

import Icon from '@/components/icon/Icon'

import {HomeCardWrapper} from'./styledHome'


export default function HomeCard({
    iconName,
    title,
    color,
    to
}) {
    const history = useHistory()
    const handerClick = useCallback(( to ) => {
        return () => {
            history.push(to)
        }
    },[history])

    return (
        <HomeCardWrapper
        color = { color }
        onClick = {handerClick(to)}
        >
            <Icon
            name = { iconName }
            size = '.25rem'
            color = '#fff'
            ></Icon>
            <span>
                { title }
            </span>
        </HomeCardWrapper>
    )
}


HomeCard.propTypes = {
    iconName: string,
    title: string,
    color: string,
    to: string
}
